<template>
	<view class="chat-container">
		<!-- 医生信息栏 -->
		<view class="doctor-header">
			<view style="display: flex;">
				<image src="/static/logo.png" mode="" style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
				<view class="doctor-name">医生姓名</view>
			</view>
			<image src="/static/phone.png" mode="" style="width: 60rpx;height: 60rpx;"></image>
		</view>

		<!-- 聊天内容区域 -->
		<scroll-view class="chat-content" scroll-y>
			<!-- 医生欢迎语 -->
			<view class="doctor-message">
				<view class="nav"></view>
				<text class="message-text" style="margin-left: 20rpx;">您好！我是XX科医生XX，\n有什么可以帮助您的？</text>
			</view>

			<!-- 患者消息 -->
			<view class="patient-message">
				<text class="message-text" style="margin-right: 20rpx;">我阳了</text>
				<view class="nav"></view>
			</view>

			<!-- 医生回复 -->
			<view class="doctor-message">
				<view class="nav"></view>
				<text class="message-text" style="margin-left: 20rpx;">你想听好消息还是坏消息？</text>
			</view>

			<!-- 患者回复 -->
			<view class="patient-message">
				<text class="message-text" style="margin-right: 20rpx;">？？？？？？</text>
				<view class="nav"></view>
			</view>
		</scroll-view>

		<!-- 输入框区域 -->
		<view class="input-area">
			<input class="message-input" placeholder="输入消息" placeholder-class="input-placeholder" />
			<button class="send-btn">发送</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 可以在这里添加聊天数据绑定
			}
		}
	}
</script>

<style>
	.chat-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f5f5;
	}

	.doctor-header {
		padding: 20rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		/* text-align: center; */
		display: flex;
		justify-content: space-around;
	}

	.doctor-name {
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 20rpx;
		margin-top: 10rpx;
	}

	.chat-content {
		flex: 1;
		padding: 20rpx;
		background-color: #f5f5f5;
	}

	.doctor-message {
		margin-bottom: 20rpx;
		display: flex;
		justify-content: flex-start;
	}

	.nav {
		width: 110rpx;
		height: 110rpx;
		background-color: #83ffc3;
		border-radius: 50%;
	}

	.patient-message {
		margin-bottom: 20rpx;
		padding: 30rpx;
		display: flex;
		justify-content: flex-end;
	}

	.message-text {
		max-width: 70%;
		padding: 15rpx 20rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		line-height: 1.5;
	}

	.doctor-message .message-text {
		background-color: #fff;
		border: 1rpx solid #eee;
	}

	.patient-message .message-text {
		background-color: #07c160;
		color: #fff;
	}

	.input-area {
		width: 90%;
		display: flex;
		padding: 15rpx;
		background-color: #fff;
		border-top: 1rpx solid #eee;
		margin-left: 20rpx;
		position: absolute;
		bottom: 20rpx;
	}

	.message-input {
		flex: 1;
		height: 80rpx;
		padding: 0 20rpx;
		background-color: #f5f5f5;
		border-radius: 40rpx;
		font-size: 28rpx;
	}

	.input-placeholder {
		color: #999;
	}

	.send-btn {
		margin-left: 15rpx;
		padding: 0 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #07c160;
		color: #fff;
		border-radius: 40rpx;
		font-size: 28rpx;
	}
</style>